<template>
  <div class="index">
    <div class="body">
      <section class="section">
        <header class="section-title">医院信息</header>
        <div class="hgroup">
          <div class="search">
            <i class="iconfont">&#xe6f7;</i>
            <input
              type="text"
              placeholder="请输入医院简称"
              class="txt-hospital-search"
              v-model="hospitalName"
            />
          </div>
          <h2 class="htitle width-30">拥挤度</h2>
          <h2 class="htitle width-30">床位（剩余/合计）</h2>
        </div>
        <section class="parent">
          <div class="layout">
            <vue-scroll>
              <ul class="child">
                <li v-for="(item,index) of hospitalList" :key="index" class="item">
                  <span class="name">{{item.name}}</span>
                  <el-progress :percentage="item.degree" :color="item.color" class="progress"></el-progress>
                  <div class="bed-wrapper">
                    <span class="bed-unused">{{item.unused}}</span>/
                    <span class="bed-sum">{{item.sum}}</span>
                  </div>
                </li>
              </ul>
            </vue-scroll>
          </div>
        </section>
      </section>
      <section class="section">
        <header class="section-title">车组信息</header>
        <div class="hgroup">
          <h2 class="center-title width-36">分中心</h2>
          <h2 class="htitle width-16">值班中</h2>
          <h2 class="htitle width-16">任务中</h2>
          <h2 class="htitle width-16">待命中</h2>
          <h2 class="htitle width-16">暂停调用</h2>
        </div>
        <section class="parent">
          <div class="layout">
            <vue-scroll>
              <ul class="child">
                <li
                  v-for="(item,index) of ambulanceList"
                  :key="index"
                  class="item amb-state-item"
                  @click="ShowTaskList(item.centerId)"
                >
                  <span class="center width-36">{{item.center}}</span>
                  <span class="num width-16">{{item.work}}</span>
                  <span class="num width-16">{{item.task}}</span>
                  <span class="num width-16">{{item.wait}}</span>
                  <span class="num width-16">{{item.stop}}</span>
                </li>
              </ul>
            </vue-scroll>
          </div>
        </section>
      </section>
      <section class="section">
        <header class="section-title">衔接统计</header>
        <section class="statistics-wrapper">
          <section class="statistics">
            <h2 class="statistics-title">衔接推送统计</h2>
            <div class="statistics-body">
              <section class="statistics-part">
                <span class="statistics-name">今日</span>
                <span class="statistics-value">{{toldStatistics.day}}</span>
              </section>
              <section class="statistics-part">
                <span class="statistics-name">本月</span>
                <span class="statistics-value">{{toldStatistics.month}}</span>
              </section>
            </div>
          </section>
          <section class="statistics">
            <h2 class="statistics-title transfer-statistics" @click="GoToTransferOrderList">转院申请总数</h2>
            <div class="statistics-body">
              <section class="statistics-part">
                <span class="statistics-name">今日</span>
                <span class="statistics-value">{{transferStatistics.day}}</span>
              </section>
              <section class="statistics-part">
                <span class="statistics-name">本月</span>
                <span class="statistics-value">{{transferStatistics.month}}</span>
              </section>
            </div>
          </section>
        </section>
        <section class="disease-level">
          <h2 class="disease-level-title">[&nbsp;&nbsp;病情分级&nbsp;&nbsp;]</h2>
          <div class="hgroup">
            <h3 class="hospital-title">医院名称</h3>
            <h3 class="htitle width-12">累计</h3>
            <h3 class="htitle width-12">I级</h3>
            <h3 class="htitle width-12">II级</h3>
            <h3 class="htitle width-12">III级</h3>
            <h3 class="htitle width-12">IV级</h3>
          </div>
          <div class="parent">
            <div class="layout">
              <vue-scroll>
                <ul class="child">
                  <li class="item" v-for="(item,index) of diseaseLevelList" :key="index">
                    <span class="name">{{item.name}}</span>
                    <span class="num width-12">{{item.total}}</span>
                    <span class="num width-12">{{item.first}}</span>
                    <span class="num width-12">{{item.second}}</span>
                    <span class="num width-12">{{item.third}}</span>
                    <span class="num width-12">{{item.four}}</span>
                  </li>
                </ul>
              </vue-scroll>
            </div>
          </div>
        </section>
        <section class="disease-type-wrapper">
          <div class="disease-type" v-for="(item,index) of diseaseTypeList" :key="index">
            <span class="disease-type-value">{{item.count}}</span>
            <span class="disease-type-name">{{item.name}}</span>
          </div>
        </section>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      ambulanceList: "",
      toldStatistics: {},
      transferStatistics: {},
      diseaseLevelList: "",
      diseaseTypeList: "",
      hospitalName: ""
    };
  },
  methods: {
    GetAmbulanceStateStatistics() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetAmbulanceList"
        }),
        method: "post"
      }).then(res => {
        console.log("GetAmbulanceStateStatistics", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.ambulanceList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求车辆状态数量失败");
        }
      });
    },
    GetToldStatistics() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetToldStatistics"
        }),
        method: "post"
      }).then(res => {
        console.log("GetToldStatistics", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.toldStatistics = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求衔接推送统计失败");
        }
      });
    },
    GetTransferStatistics() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetTransferStatistics"
        }),
        method: "post"
      }).then(res => {
        console.log("GetTransferStatistics", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.transferStatistics = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求转院申请总数失败");
        }
      });
    },
    GetDiseaseLevelList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetDiseaseLevelList"
        }),
        method: "post"
      }).then(res => {
        console.log("GetDiseaseLevelList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.diseaseLevelList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求病情分级列表失败");
        }
      });
    },
    GetDiseaseTypeList() {
      this.$axios({
        data: this.$qs.stringify({
          MessageType: "GetDiseaseTypeList"
        }),
        method: "post"
      }).then(res => {
        console.log("GetDiseaseTypeList", res);
        if (res.status == 200) {
          let obj = res.data;
          if (obj.status == 200) {
            this.diseaseTypeList = obj.data;
          } else {
            this.$message.error(obj.message);
          }
        } else {
          this.$message.error("请求现场判断列表失败");
        }
      });
    },
    ShowTaskList(centerId) {
      this.$store.commit("SaveClickedCenterId", centerId);
      this.$router.push({ name: "HospitalList" });
    },
    GoToTransferOrderList() {
      this.$router.push({ name: "TransferOrderList" });
    }
  },
  mounted() {
    this.GetAmbulanceStateStatistics();
    this.GetToldStatistics();
    this.GetTransferStatistics();
    this.GetDiseaseLevelList();
    this.GetDiseaseTypeList();
  },
  computed: {
    hospitalList() {
      return this.$store.state.hospitalIndexList;
    }
  },
  watch: {
    hospitalName(val) {
      this.$store.commit("FilterIndexHospital", val);
    }
  },
  destroyed () {
     this.$store.commit("FilterIndexHospital", "");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  height: 90%;
  display: flex;
  flex-direction: column;
}
.body {
  flex-grow: 1;
  margin-top: 2%;
  display: flex;
  justify-content: space-around;
}
.section {
  width: 32.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1%;
  background: url("../assets/image/content-bg.png") rgba(6, 53, 128, 0.2);
  background-size: 100% 100%;
}
.section-title {
  height: 46px;
  color: #fff;
  margin-top: -23px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../assets/image/titlebg.png");
  background-size: 100% 100%;
  width: 210px;
  font-size: 21px;
}
.hgroup {
  height: 5%;
  margin-top: 2%;
  display: flex;
  width: 92%;
  background: rgba(23, 126, 230, 0.5);
  align-items: center;
}
.search {
  color: #fff;
  display: flex;
  align-items: center;
  width: 40%;
}
.search > .iconfont {
  margin-left: 5px;
  font-size: 26px;
}
.txt-hospital-search {
  background: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  color: #fff;
}
::placeholder {
  color: #aaa;
  font-size: 18px;
}
.htitle {
  color: #fff;
  font-weight: normal;
  font-size: 18px;
}
.parent {
  flex-grow: 1;
  width: 92%;
  position: relative;
}
.layout {
  position: absolute;
  top: 0;
  bottom: 0;
  overflow: auto;
  width: 100%;
}
.child {
}
.item {
  display: flex;
  height: 48px;
  background: rgba(217, 249, 255, 0.1);
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.amb-state-item {
  cursor: pointer;
}
.name {
  width: 40%;
  color: #fff;
  padding-left: 5px;
  font-size: 18px;
}
.progress {
  width: 30%;
  display: flex;
  align-items: center;
}
.progress >>> .el-progress__text {
  color: #fff;
  font-size: 12px;
  transform: scale(0.7);
}
.bed-wrapper {
  color: #fff;
}
.bed-unused {
  color: #07de44;
  font-size: 18px;
}
.bed-sum{
  font-size: 18px;
}
.width-30 {
  width: 30%;
}
.width-36 {
  width: 36%;
}
.width-16 {
  width: 16%;
}
.num {
  color: #fff;
  font-size: 18px;
}
.center-title {
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  padding-left: 5px;
}
.center {
  color: #fff;
  margin-left: 5px;
  font-size: 18px;
}
.statistics-wrapper {
  margin-top: 2%;
  display: flex;
  width: 92%;
  justify-content: space-between;
  height: 15%;
}
.statistics {
  width: 49%;
}
.statistics-title {
  background: rgba(23, 126, 230, 0.5);
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-weight: normal;
  height: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.statistics-body {
  display: flex;
  margin-top: 5%;
  justify-content: space-between;
}
.statistics-part {
  border: 1px solid #018ac2;
  width: 49%;
  display: flex;
}
.statistics-name {
  border-right: 1px solid #018ac2;
  color: #fff;
  flex-grow: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
}
.statistics-value {
  color: #fff;
  flex-grow: 1;
  text-align: center;
  padding: 10px 0;
   font-size: 20px;
}
.disease-level {
  margin-top: 2%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 92%;
  align-items: center;
}
.disease-level-title {
  color: #fff;
  font-size: 21px;
}
.hospital-title {
  padding-left: 5px;
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  width: 40%;
}
.width-12 {
  width: 14%;
}
.disease-level > .hgroup {
  width: 100%;
  height: 8%;
}
.disease-level > .parent {
  width: 100%;
}
.disease-type-wrapper {
  margin-top: 3%;
  margin-bottom: 2%;
  display: flex;
  width: 92%;
  flex-wrap: wrap;
  align-content: space-between;
  justify-content: space-between;
}
.disease-type {
  display: flex;
  flex-direction: column;
  width: 30%;
  padding: 10px 0;
  border: 1px solid #177ee5;
  margin: 5px 0;
  align-items: center;
  border-radius: 3px;
}
.disease-type-name {
  color: #177ee6;
  font-size: 19px;
}
.disease-type-value {
  color: #fff;
  font-weight: bold;
  font-size: 21px;
}
.transfer-statistics {
  cursor: pointer;
}
</style>